/* 表单label样式
-------------------------- */
.el-form {
  .el-form-item {
    margin-bottom: 20px;
  }
}

// 抵消 table-form 中的 margin-bottom: 20px;
.dg-table {
  .el-form-item.dg-form-column__form-item--wrap {
    margin-bottom: 0;
  }
}

/* 标题通用样式
-------------------------- */
.v-h4 {
  font-size: 16px;
  margin-bottom: 16px;
}

.v-p {
  font-size: 16px;
}

/* 通用卡片
-------------------------- */
.dg-normal-card {
  width: 100%;
  // height: 183px;
  padding: 16px 24px;
  background: $dg-normal-card-background;
  border-radius: 4px;
  box-sizing: border-box;

  &__info {
    height: 112px;
  }

  &__title {
    color: $--color-text-primary;
    @include mq($large) {
      font-size: 30px;
    }
    @include mq($medium) {
      font-size: 26px;
    }
    @include mq($small) {
      font-size: 22px;
    }
  }

  &__subtitle {
    //font-size: 14px;
    color: $--color-text-regular;
  }

  &__tip {
    position: absolute;
    width: 16px;
    height: 16px;
  }

  & .dg-normal-card__foot {
    padding-top: 14px;
    margin-top: 10px;
    border-top: 1px solid $--border-color-base;
    color: $--color-text-secondary !important;
    //font-size: 14px;
    height: 20px;
    line-height: 20px;

    // slot=footer 扩展
    & .el-icon-refresh {
      float: right;
      font-size: 20px;
      color: #b1b1b1;
    }

    & .v-normal-cart-strong {
      color: $--color-text-primary;
      padding-left: 2px;
    }
  }

  & .v-normal-cart-per {
    display: inline-block;
    position: relative;
    padding-right: 20px;
    color: $--color-text-secondary;

    & + .v-normal-cart-per {
      margin-left: 15px;
    }

    & .v-normal-cart__up {
      position: absolute;
      display: block;
      top: 7px;
      right: 5px;
      border-bottom: 6px solid #f5222d;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-radius: 2px;
    }

    & .v-normal-cart__down {
      position: absolute;
      display: block;
      top: 7px;
      right: 5px;
      width: 0px;
      height: 0px;
      border-top: 6px solid #52c41a;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-radius: 2px;
    }
  }

  & .dg-normal-card__box {
    //font-size: 14px;
    color: $--color-text-secondary;
    margin-top: 10px;
    height: 35px;

    // display: flex;
    // align-items: flex-end;
    & .ve-line {
      height: 35px;
    }
  }
}

// 首页样式 -- 图标
// 资源检测图标
.v-icon-source {
  display: inline-block;
  width: 25px;
  height: 27px;
  background: url(#{$--base-resources-path}/dashboard/icon.png) no-repeat 0px 0px;
  background-size: 302px 35px;
}

.v-icon-data {
  display: inline-block;
  width: 27px;
  height: 26px;
  background: url(#{$--base-resources-path}/dashboard/icon.png) no-repeat -48px -1px;
  background-size: 302px 35px;
}

.v-icon-warning-data {
  display: inline-block;
  width: 27px;
  height: 26px;
  background: url(#{$--base-resources-path}/dashboard/icon.png) no-repeat -109px -1px;
  background-size: 302px 35px;
}

.v-icon-problem-per {
  display: inline-block;
  width: 27px;
  height: 26px;
  background: url(#{$--base-resources-path}/dashboard/icon.png) no-repeat -166px -1px;
  background-size: 302px 35px;
}

.v-icon-deal {
  display: inline-block;
  width: 29px;
  height: 26px;
  background: url(#{$--base-resources-path}/dashboard/icon.png) no-repeat -212px -1px;
  background-size: 302px 35px;
}

.v-icon-deal-per {
  display: inline-block;
  width: 29px;
  height: 26px;
  background: url(#{$--base-resources-path}/dashboard/icon.png) no-repeat -263px -1px;
  background-size: 302px 35px;
}

.icon-word-box {
  & .icon {
    float: left;
    width: 50px;
    height: 50px;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  & .word {
    float: left;
    margin-left: 15px;
    & .title {
      font-size: 14px;
      color: $--color-text-regular;
    }
    & .subTitle {
      font-size: 24px;
      color: $--color-text-primary;
    }
  }
}

.word-title {
  font-size: 16px;
  color: $--color-text-primary;
  margin-bottom: 25px;
}
/* 首页-流入流出
-------------------------- */
.v-inflow-outflow {
  box-sizing: border-box;
  height: 380px;

  &-echerts {
    position: relative;
    & > span {
      font-size: 14px;
      color: #8c8c8c;
      position: absolute;
      top: -6px;
      left: 0;
    }
  }

  &-box {
    position: relative;
  }

  &-right {
    height: 270px;
    margin-left: 20px;
    padding-left: 32px;
    border-left: 1px solid $--border-color-extra-light;
    &-row {
      padding: 10px;
      font-size: 14px;
      line-height: 14px;
      color: $--color-text-primary;

      &-city {
        margin-left: 14px;
      }
      &-right {
        text-align: right;
      }
    }
    h3 {
      margin-bottom: 20px;
      font-size: 14px;
      line-height: 14px;
      color: $--color-text-regular;
    }
    .is-default-background {
      display: inline-block;
      width: 16px;
      height: 16px;
      line-height: 16px;
      font-size: 12px;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.04);
    }
    .is-red {
      color: #fff;
      background: red;
    }
    .is-orange {
      color: #fff;
      background: #fb982d;
    }
    .is-yellow {
      color: #fff;
      background-color: #fadb14;
    }
  }
}

/* 首页布应用服务
-------------------------- */
.v-yyfw-pop {
  .el-carousel__container {
    height: 190px;
  }

  &__box {
    width: 100%;
    height: 185px;
    border-radius: 2px;
    //border: solid 1px rgba(0, 0, 0, 0.15);
    border: solid 1px $--border-color-base;
    box-sizing: border-box;
    display: inline-block;
    margin-right: 16px;
    overflow: hidden;

    & > div {
      width: 300px;
      margin: 35px auto;
    }

    &-left {
      display: inline-block;

      img {
        width: 108px;
        height: 108px;
        display: inline-block;
      }
    }

    &-right {
      display: inline-block;
      vertical-align: top;
      margin-top: 20px;
      @include mq($large) {
        width: 180px;
      }
      @include mq($medium) {
        width: 160px;
      }
      @include mq($small) {
        width: 160px;
      }
    }
  }

  .el-carousel__indicator--horizontal {
    padding: 12px 6px;

    button {
      width: 20px;
    }
  }
}

/* 首页 table-model组件
-------------------------- */
.v-tm {
  & > div {
    display: inline-block;
  }
  &__left {
    width: 100%;
    height: 442px;
    vertical-align: top;
  }
  &__right {
    width: 100%;
    display: inline-block;
    height: 442px;
    .l-template-box {
      height: 442px;
      &__header-right {
        font-size: 14px;
        color: $--color-text-regular;
        float: right;
        padding: 3px 0;
      }
    }
  }
}

/* 我的资源和资源
-------------------------- */
.v-resources {
  &__left,
  &__right {
    height: 398px;
  }
  &__box {
    &-item {
      margin-top: 40px;
      line-height: 40px;
    }
    &-title {
      padding-bottom: 18px;
      border-bottom: solid 1px rgba(0, 0, 0, 0.09);
      line-height: 18px;
      letter-spacing: 0;
      font-weight: 500;
      color: $--color-text-primary;
    }
    .is-change-position {
      position: relative;
      top: 8px;
    }
    &-item-left {
      i {
        font-size: 44px;
        color: $--message-close-icon-color;
      }
      display: inline-block;
      & > span {
        display: inline-block;
        margin-left: 10px;

        span {
          color: $--color-text-primary;

          @include mq($large) {
            font-size: 24px;
          }
          @include mq($medium) {
            font-size: 20px;
          }
          @include mq($small) {
            font-size: 16px;
          }
        }

        & p:first-child {
          line-height: 14px;
          color: $--color-text-regular;
          @include mq($large) {
            font-size: 14px;
          }
          @include mq($medium) {
            font-size: 14px;
          }
          @include mq($small) {
            font-size: 12px;
          }
        }
        & p:last-child {
          line-height: 14px;
          color: $--color-text-primary;
          margin-top: 5px;

          @include mq($large) {
            font-size: 14px;
          }
          @include mq($medium) {
            font-size: 14px;
          }
          @include mq($small) {
            font-size: 12px;
          }
        }
      }
    }
    &-item-right {
      display: inline-block;
      float: right;
      text-align: right;

      & p:first-child {
        line-height: 14px;
        color: $--color-text-primary;
        @include mq($large) {
          font-size: 16px;
        }
        @include mq($medium) {
          font-size: 14px;
        }
        @include mq($small) {
          font-size: 12px;
        }
      }

      & p:last-child {
        line-height: 14px;
        color: $--color-text-regular;
        margin-top: 10px;

        @include mq($large) {
          font-size: 14px;
        }
        @include mq($medium) {
          font-size: 14px;
        }
        @include mq($small) {
          font-size: 12px;
        }
      }
    }
  }
}

/* 首页、年度累计、本月累计、曲线图
-------------------------- */
.v-cumulative {
  .l-template-box {
    height: 400px;
    box-sizing: border-box;
  }
  &-year {
    .l-template-box__content {
      padding: 24px 0;
    }

    .v-cumulative-box {
      background: url("../../../static/page/dashboard/cumulative-background.png") no-repeat;
      background-size: 100%;
    }
  }

  &-box {
    text-align: center;
    height: 100%;
    width: 100%;
    margin-top: 60px;

    &__header {
      position: relative;
      h3 {
        font-size: 18px;
        line-height: 18px;
        color: $--color-text-primary;
      }

      p {
        span {
          font-size: 42px;
          color: $--color-primary;
          position: relative;

          em {
            font-size: 12px;
            color: #27dbd9;
            position: absolute;
            top: 24px;
            right: -45px;
          }
        }
      }

      span {
        font-size: 12px;
        color: $--color-text-regular;
      }
    }
    &__footer {
      margin-top: 60px;

      h2 {
        font-size: 14px;
        color: $--color-text-secondary;
      }

      span {
        font-size: 20px;
        color: $--color-text-primary;
      }
      p {
        position: relative;
      }
      em {
        position: absolute;
        top: 10px;
        font-size: 12px;
        color: #27dbd9;

        @include mq($large) {
          right: 10px;
        }
        @include mq($medium) {
          right: 0;
        }
        @include mq($small) {
          right: -14px;
        }
      }
    }
  }

  &-chart {
    position: relative;

    &__select {
      width: 106px;
    }
  }
}

/* 表单样式
-------------------------- */
.v-form-single {
  .el-form-item__label {
    width: 100%;
  }
  .el-date-editor--daterange.el-input__inner {
    width: 100%;
  }
}
.v-form {
  &__title {
    font-weight: bold;
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 100%;
  }
}
.v-form-text {
  .el-form-item {
    margin-bottom: 0;
  }
  .el-form-item__label {
    color: $--color-text-secondary;
  }
}

.v-exception-demo {
  background: $--fill-base;
}

.v-field-bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1;
  display: inline-block;
  width: 100%;
  box-shadow: 0 0 4px #ccc;
  background: $--fill-base;
  .el-row {
    padding: 0 54px;
    box-sizing: border-box;
  }
  &__buttons {
    float: right;
  }
}

/* 分栏内侧布局
-------------------------- */
.v-inside-layout {
  position: relative;
  &__left {
    height: 100%;
    border-right: 1px solid $--border-color-base;
    box-sizing: border-box;
  }
  &__right {
    height: 100%;
  }
  /deep/ {
    .el-card__body {
      padding: 0;
    }
  }
  &__tag {
    .dg-tag + .dg-tag {
      margin-left: 0;
      //margin-right: 8px;
    }
    & span {
      margin-right: 8px;
    }
  }
}

// 搜索树
.v-search-tree {
  position: relative;
  &__header {
    padding: 1rem 20px 0;
    /deep/ {
      .el-button--text + .el-button--text {
        margin-left: 2rem;
      }
    }
  }
  &__body {
    padding: 0 20px;
  }
}

// 编辑树
.v-edit-tree {
  /deep/ {
    .v-edit-tree__edit {
      box-sizing: border-box;
      width: calc(100% - 40px);
      height: 20px;
      padding: 2px 6px;
      line-height: 16px;
      border: 0px;
      background: $--input-background-color;
    }
    .v-edit-tree__label {
      display: block;
      width: calc(100% - 40px);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .v-edit-tree__buttons {
      display: none;
      position: absolute;
      top: 0;
      right: 4px;
      z-index: 1;
    }
    .el-tree-node.is-current > .el-tree-node__content .v-edit-tree__buttons {
      display: block;
    }
    .dg-tree-node .el-tree-node__label {
      width: 100%;
    }
    .dg-tree-node .el-tree-node__content {
      position: relative;
    }
  }
}

/* 分栏外侧布局
-------------------------- */
.v-outside-layout {
  // 搜索区域
  .v-search-box {
    height: 100%;
    &__header {
      padding: 1rem 20px 0;
    }
    /deep/ {
      .el-card__body {
        padding: 0;
      }
    }
  }
  // 通用菜单
  .v-normal-menu {
    position: relative;
    &__container {
      width: 100%;
      border-right: 0;
    }
    /deep/ {
      .el-menu-item,
      .el-submenu__title {
        color: $--color-text-secondary;
        padding: 0 16px;
        transition: background-color 0.3s, color 0.3s, box-shadow 0.5s, -webkit-box-shadow 0.5s;
        height: 3rem;
        line-height: 3rem;
        @include mq($large) {
          font-size: 14px;
        }
        @include mq($medium) {
          font-size: 14px;
        }
        @include mq($small) {
          font-size: 12px;
        }
      }
      .el-menu-item.is-active,
      .el-submenu__title.is-active {
        background-color: rgba(24, 144, 255, 0.12);
        color: $--color-primary;
      }
    }
  }
  // 图表
  .v-charts-box {
    height: 100%;
    &__model {
      margin: 0 auto;
    }
  }
}

/* 执法办案
-------------------------- */
.v-ajsl {
  .el-form-item__content {
    margin-left: 75px;
  }
  .el-form-item__label {
    width: 70px;
    position: relative;
    left: 5px;
  }
  .v-caseAcceptance {
    &__source {
      margin-bottom: 42px;
      h3 {
        margin-bottom: 24px;
      }
    }

    &__prople {
      margin-bottom: 12px;
    }
  }

  .v-opinion {
    &__header {
      width: 380px;
      float: right;
    }

    &__radio {
      label {
        display: block;
        padding: 9px 0;
      }
    }
  }

  .v-caseAcceptance__h3 {
    margin-bottom: 16px;
  }

  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 100%;
  }
}

/* 分布表单
-------------------------- */
.v-distribution-form {
  min-height: calc(100vh - 180px);

  &__button {
    @include mq($large) {
      min-width: 100px;
    }
    @include mq($medium) {
      min-width: 100px;
    }
    @include mq($small) {
      min-width: 100px;
    }
  }

  &-padding {
    padding: 0 120px 0 45px;
  }

  &-stepControl {
    padding: 0 120px 0 125px;
    text-align: center;
  }

  &__content {
    width: 780px;
    margin: 0 auto;

    &-steps {
      margin-bottom: 34px;

      .el-step__title {
        @include mq($large) {
          font-size: 14px;
        }
        @include mq($medium) {
          font-size: 14px;
        }
        @include mq($small) {
          font-size: 12px;
        }
      }
    }

    & .el-step__icon {
      width: 32px;
      height: 32px;
      background: transparent;
    }
    .el-step.is-center .el-step__line {
      left: 47%;
      right: -44%;
      top: 15px;
    }

    &-button {
      text-align: center;
    }

    &-secend_step {
      &-header {
        margin-bottom: 30px;
        margin-left: 72px;
        width: 545px;
      }

      &-box {
        padding-left: 45px;
        .el-form-item {
          margin-bottom: 10px;
        }
      }
    }

    &-three_step {
      margin-top: 112px;
      text-align: center;
      padding: 0 0 0 1px;

      & > i {
        font-size: 50px;
        margin-bottom: 25px;
        color: #52c41a;
        margin-right: 35px;
      }

      h1 {
        font-size: 32px;
        margin-bottom: 16px;
        font-weight: 700;
      }

      &-footer {
        margin-top: 32px;
        span {
          margin: 0 16px;
          color: #00b7ee;
          cursor: pointer;
        }
      }
    }
  }

  &__footer {
    font-size: 16px;
    padding: 56px 0 40px 54px;
    border-top: solid 1px rgba(0, 0, 0, 0.09);
    margin-top: 54px;

    & > p {
      font-weight: 500;
      color: $--color-text-regular;
      margin-bottom: 10px;
    }

    .dg-words-normal {
      p {
        display: inline-block;
        color: $--color-text-regular;
      }
      & p:last-child {
        margin-left: 60px;
      }
    }
  }
}

/* 搜索列表- 筛选部分
-------------------------- */
.v-search-list__toggle {
  .el-button--primary {
    color: $--color-white !important;
  }
}
.tab-toggle-button {
  padding: 0;
  width: 32px;
  height: 32px;
  color: $--color-text-secondary;
}
.v-screen-card {
  .first-padding {
    padding: 0 0 12px 0;
  }

  &__box {
    padding: 12px 0;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.09);
    & > span:first-child {
      display: inline-block;
      width: 110px;
      text-align: right;
      line-height: 14px;
      color: $--color-text-regular;
    }

    span {
      cursor: pointer;
    }

    .dg-tag {
      margin-right: 24px !important;
      margin-left: 0 !important;
      height: 32px;
      line-height: 32px;
      padding: 0 16px;

      @include mq($large) {
        font-size: 14px;
        height: 32px;
        line-height: 32px;
      }
      @include mq($medium) {
        font-size: 14px;
        height: 28px;
        line-height: 28px;
      }
      @include mq($small) {
        font-size: 12px;
        height: 24px;
        line-height: 24px;
      }
    }
  }

  &__date {
    display: inline-block;

    .el-input__inner {
      width: 320px;
    }
  }

  &__button {
    margin-left: 8px;
  }
}

/* 搜索列表-- 卡片2
-------------------------- */
.l-infomation-card {
  border: solid 1px $--border-color-extra-light;
  box-sizing: border-box;
  margin-bottom: 20px;
  height: 120px;

  .el-checkbox__inner {
    background: #fff;
  }

  &__img {
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: 100%;
    height: 118px;

    img {
      width: 100%;
      height: 100%;
    }

    .el-checkbox {
      position: absolute;
      top: 10px;
      left: 10px;
    }
  }

  &__content {
    display: inline-block;
    padding: 14px 14px 12px 16px;
    box-sizing: border-box;
    overflow: hidden;

    h3 {
      font-size: 14px;
      line-height: 14px;
      color: $--color-text-primary;
      font-weight: 800;
      margin-bottom: 12px;
    }

    p {
      font-size: 12px;
      color: $--color-text-regular;
    }

    em {
      font-size: 12px;
      color: $--color-text-primary;
    }
  }
}

/* 搜索列表-- 卡片3
-------------------------- */
.v-card-box {
  border: solid 1px rgba(0, 0, 0, 0.15);
  margin-bottom: 20px;
  width: 100%;
  background: $l-template-box-bacground-color;

  &__content {
    padding: 24px 32px;

    &-tittle {
      span {
        display: inline-block;
        width: 25px;
        height: 25px;
        background: #00bb00;
        border-radius: 50%;
        i {
          color: #ffffff;
          margin-left: 4px;
        }
      }
      h2 {
        color: $--color-text-primary;
        font-size: 18px;
        font-weight: 800;
        display: inline-block;
        margin-left: 10px;
      }
    }

    &-num {
      padding: 0 41px;

      & > div {
        display: inline-block;
        vertical-align: top;

        h3 {
          font-size: 14px;
          color: $--color-text-secondary;
          padding: 20px 0 10px;
        }

        span {
          font-size: 24px;
          color: $--color-text-primary;
        }
      }

      & > div:first-child {
        margin-right: 56px;
      }
    }
  }
  &__footer {
    height: 48px;
    line-height: 48px;
    background-color: $--disabled-fill-base;
    text-align: center;
    cursor: pointer;

    &-border-left {
      border-right: 1px solid $--border-color-extra-light;
    }

    &-icon {
      height: 30px;
      line-height: 30px;
      position: relative;
      top: 10px;
    }
  }
}

/* 搜索列表-- 卡片4
-------------------------- */
.v-card__up-down {
  height: 357px;
  width: 100%;
  margin-bottom: 16px;
  border: solid 1px rgba(0, 0, 0, 0.15);
  position: relative;

  & > img {
    width: 100%;
    height: 210px;
  }
  &-text {
    padding: 24px 16px 0 16px;

    h2 {
      //font-size: 16px;
      line-height: 16px;
      color: $--color-text-primary;
      font-weight: 800;
      margin-bottom: 16px;
    }

    p {
      //font-size: 14px;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.65);
    }

    &-footer {
      width: 100%;
      font-size: 12px;
      color: $--color-text-regular;
      position: absolute;
      bottom: 0;
      left: 0;
      box-sizing: border-box;
      padding: 0 16px 24px 16px;
    }

    .el-icon-download {
      font-size: 16px;
      color: $--color-primary;
      float: right;
    }
  }
}

/* 结果页-- 提交成功
-------------------------- */
.v-submit-successfully {
  &__header {
    padding: 88px 0 36px 0;
    text-align: center;

    i {
      font-size: 72px !important;
      color: #52c41a;
      position: relative;
      left: -25px;
      margin-bottom: 16px;
    }

    h1 {
      font-size: 32px;
      color: $--color-text-primary;
      margin-bottom: 5px;
      font-weight: 700;
    }

    p {
      font-size: 16px;
      color: $--color-text-secondary;
    }
  }

  &__content {
    height: 228px;
    padding: 32px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.02);
    border: 1px solid $v-submit-successfully-content-border;
    border-radius: 2px;
    h2 {
      //font-size: 18px;
      line-height: 1;
      color: $--color-text-primary;
      font-weight: 800;
    }
    &-text {
      margin-top: 25px;
      em {
        color: $--color-text-primary;
      }
    }
    &-step {
      margin-top: 32px;
      .el-step__head.is-process .el-step__icon {
        background: #ccc;
        border: 1px solid #ccc !important;
        color: #ccc;
      }
      .el-step.is-center .el-step__line {
        left: 45%;
        right: -48%;
      }
      .el-step__icon {
        background: #ccc;
        color: #ccc;
        width: 12px;
        height: 12px;
      }
      .el-step__icon.is-text {
        border: 1px solid #ccc;
      }
      .is-finish {
        .el-step__icon {
          background: $--color-primary;
          color: $--color-primary;
          border: 1px solid $--color-primary;
        }
      }
      .el-step__main {
        .el-step__title.is-finish {
          font-weight: 700;
          color: $--color-text-secondary;
        }
        .el-step__description.is-finish {
          color: $--color-text-regular;
        }
        .el-step__title.is-process {
          font-weight: 500;
          color: $--color-text-regular;
        }
        .el-step__title.is-wait {
          color: $--color-text-regular;
        }

        .el-step__title {
          @include mq($large) {
            font-size: 14px;
          }
          @include mq($medium) {
            font-size: 14px;
          }
          @include mq($small) {
            font-size: 12px;
          }
        }
      }
    }
  }

  &__footer {
    text-align: center;
    margin-top: 16px;
  }
}

/* 结果页-- 提交失败
-------------------------- */
.v-submit-failure {
  .el-icon-error {
    color: #f5222d;
  }

  &__header {
    padding: 88px 0 36px 0;
    text-align: center;
    i {
      font-size: 72px !important;
      color: #52c41a;
      position: relative;
      left: -25px;
      margin-bottom: 16px;
    }
    h1 {
      font-size: 32px;
      color: $--color-text-primary;
      margin-bottom: 5px;
      font-weight: 700;
    }
    p {
      font-size: 16px;
      color: $--color-text-secondary;
    }
  }

  &__content {
    height: 150px;
    padding: 32px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 2px;
    border: 1px solid $v-submit-successfully-content-border;

    h2 {
      line-height: 18px;
      color: $--color-text-primary;
      font-weight: 800;
      margin-bottom: 20px;
    }

    i {
      margin-right: 8px;
      font-size: 14px;
    }

    & p:last-child {
      margin-top: 10px;
    }
  }

  &__footer {
    text-align: center;
    margin-top: 16px;
  }
}

/* 登录页-- 类型1
-------------------------- */
.v-login-box {
  background: #1c2e44;
  box-sizing: border-box;
  @include mq($large) {
    height: 100vh;
  }
  @include mq($medium) {
    height: calc(100vh + 200px);
  }
  @include mq($small) {
    height: calc(100vh + 200px);
  }

  &__logo {
    padding: 32px 0 60px 48px;
  }

  &__content {
    box-sizing: border-box;
    width: 482px;
    height: 607px;
    padding: 70px 64px;
    position: absolute;
    z-index: 1000;
    right: 10%;
    top: 50%;
    margin-top: -303px;
    background: $dg--card-background;

    h2 {
      font-size: 24px;
      color: $--color-text-regular;
    }

    h1 {
      font-size: 40px;
      font-weight: 800;
      color: $--color-text-primary;
      em {
        font-size: 24px;
        color: $--color-text-regular;
      }
      margin-bottom: 48px;
    }
    .el-input__inner {
      background: transparent;
    }

    &-name {
      margin-bottom: 24px;
    }

    &-password {
      margin-bottom: 16px;
    }

    &-name,
    &-password {
      font-size: 14px;
      color: $--color-text-regular;
      & > span {
        display: inline-block;
        padding-bottom: 5px;
      }
    }

    .border-input {
      input {
        border-left: none;
        border-right: none;
        border-top: none;
        padding-left: 0;
      }
    }

    &-tips {
      margin-bottom: 48px;
      a {
        float: right;
        font-size: 14px;
      }
      .el-checkbox__label {
        font-size: 14px;
      }
    }

    &-btn {
      width: 100%;
      height: 48px;
      font-size: 18px;
    }
  }
}

//左侧动画图
.v-login-box__bg {
  display: inline-block;
  /*border: 1px solid red;*/
  position: absolute;
  top: 26%;
  left: 8%;

  .logo-rotate {
    /*border: 1px solid red;*/
    position: absolute;
    top: -124px;
    left: 126px;
    z-index: 10;
    width: 500px;
  }

  .logo-bottom {
    width: 800px;
  }
  .line-position {
    position: absolute;
  }
  .line-left-1 {
    top: -78px;
    left: 86px;
  }
  .line-left-2 {
    top: 10px;
    left: 110px;
  }
  .line-right-1 {
    top: 40px;
    right: 175px;
  }
  .line-right-2 {
    top: -80px;
    right: 251px;
  }
  .line-right-3 {
    top: 100px;
    right: 235px;
  }
  .line-far-3 {
    top: 118px;
    right: 341px;
  }
  .line-close-3 {
    top: -118px;
    right: 321px;
  }
}

/* 详情页 -- 高级
-------------------------- */
.v-detail-page {
  &__box {
    margin-bottom: 24px;

    &-tittle {
      margin-bottom: 16px;
    }

    &-row {
      padding: 17px 0 24px 10px;
      border-bottom: solid 1px $--border-color-extra-light;

      .text-title {
        display: inline-block;
        width: 100px;
        text-align: right;
      }
    }

    p {
      line-height: 16px;
    }

    .el-col {
      padding: 5px 0;
    }

    &-no {
      color: red;
    }
  }

  &__table {
    .el-form--inline .el-form-item {
      display: block;
      margin-bottom: 0;
    }
    .el-table__body td {
      background: transparent;
    }
  }
}

/* 详情页 -- 基础
-------------------------- */
.v-list-details {
  &-box {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid $--disabled-fill-base;

    h2 {
      font-weight: 800;
      line-height: 16px;
      margin-bottom: 15px;
      color: $--color-text-secondary;
    }

    &__text {
      margin-top: 16px;
      max-width: 1000px;
      color: $--color-text-regular;
      margin-bottom: 12px;
    }

    &__middle {
      margin-bottom: 17px;
      & > span:first-child {
        i {
          font-size: 14px;
          width: 14px;
          height: 14px;
          color: #1890ff;
          margin-right: 3px;
          position: relative;
          top: 1px;
        }
        a {
          margin-right: 8px;
        }
      }
      &-time {
        font-size: 12px;
        margin-left: 10px;
        color: $--color-text-placeholder;
      }
    }

    &__footer {
      font-size: 12px;
      line-height: 14px;
      color: $--color-text-secondary;
      position: relative;
      left: -13px;
      &-border {
        border-right: 1px solid $--disabled-fill-base;
      }
      span {
        padding: 0 16px;
      }
      i {
        font-size: 14px;
        margin-right: 8px;
      }
    }
  }
}
//表格请求表单样式
.table-filter {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 2px;
  .el-cascader{
    width: 100%;
  }
  > div {
    width: 33.3%;
    > div {
      display: inline-block;
      width: 94%;
    }
  }
  > div:nth-child(3n) {
    text-align: right;
  }
    > div:nth-child(3n-1) {
    text-align: center;
  }
  .el-date-editor--datetimerange{
    width: 100%!important;
  }
}
.table-date-timerange {
  .el-scrollbar {
    width: 50%;
  }
}
.table-filter-home{
  padding: 20px 20px 0 20px;
  border-radius: 2px;
}
.app-main-content-box {
  background: #fff;
  min-height: calc(100vh - 160px);
  padding: 15px;
  border-radius: 2px;
}


// 列表组件-筛选
.form-search {
  display: flex;
  & + & {
    margin-top: 15px;
  }
  .form-item {
    display: flex;
  }
  .form-item + .form-item {
    margin-left: 12px;
  }
}
.no-data{
  font-size: 14px;
  color: #aaa;
}

/*
---------------- 滚动条默认显示样式--*/
//#region 滚动条样式
::-webkit-scrollbar {
  // 滚动条大小
  width: 10px;
  height: 10px;
  border-radius: 4px;
  cursor: pointer;
  // 滚动条显示样式
  &-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    background-clip: padding-box;
    border: 2px solid transparent;
    // 鼠标点击滚动条显示样式
    &:hover {
      background-color: rgba(0, 0, 0, 0.15);
    }
    // 鼠标点击的颜色
    &:active {
      background-color: rgba(0, 0, 0, 0.15);
    }
  }
  // 滚动框背景样式
  &-track-piece {
    background-color: transparent;
    margin: -2px;
  }
}
//#endregion